import React from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
    KeyboardAvoidingView,
    Platform,
    Image,
    Modal,
} from 'react-native';
import { Button } from '@ant-design/react-native';
import shezhi from '../../assets/shezhi.png';
import bmk from '../../assets/aiiiss.png';
import { styles } from './styles';
import { LoginScreenProps } from './types';
import { useLoginScreen } from './hooks';

const LoginScreen: React.FC<LoginScreenProps> = (props) => {
    const {
        username,
        setUsername,
        password,
        setPassword,
        settingsVisible,
        settingsInput,
        setSettingsInput,
        handleLogin,
        handleSettingsPress,
        handleSettingsConfirm,
        handleSettingsCancel,
    } = useLoginScreen(props);

    return (
        <KeyboardAvoidingView
            style={styles.container}
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        >
            {/* 右上角设置按钮 */}
            <TouchableOpacity style={styles.settingsButton} onPress={handleSettingsPress}>
                <Image source={shezhi} style={styles.settingsIcon} />
            </TouchableOpacity>

            <View style={styles.content}>
                <Image source={bmk} style={styles.logo} />
                <Text style={styles.title}>Aiiiss-MOM 终端系统</Text>

                <View style={styles.inputContainer}>
                    <View style={styles.inputWrapper}>
                        <TextInput
                            style={styles.input}
                            placeholder="请输入用户名"
                            placeholderTextColor="#999"
                            value={username}
                            onChangeText={setUsername}
                            autoCapitalize="none"
                        />
                        {username.length > 0 && (
                            <TouchableOpacity
                                style={styles.clearButton}
                                onPress={() => setUsername('')}
                            >
                                <Text style={styles.clearButtonText}>×</Text>
                            </TouchableOpacity>
                        )}
                    </View>

                    <View style={styles.inputWrapper}>
                        <TextInput
                            style={styles.input}
                            placeholder="请输入密码"
                            value={password}
                            placeholderTextColor="#999"
                            onChangeText={setPassword}
                            secureTextEntry
                            autoCapitalize="none"
                        />
                        {password.length > 0 && (
                            <TouchableOpacity
                                style={styles.clearButton}
                                onPress={() => setPassword('')}
                            >
                                <Text style={styles.clearButtonText}>×</Text>
                            </TouchableOpacity>
                        )}
                    </View>
                </View>

                <Button
                    style={styles.loginButton}
                    onPress={handleLogin}
                    type="primary"
                    size="large"
                >
                    登录
                </Button>
            </View>

            {/* 设置弹出框 */}
            <Modal
                visible={settingsVisible}
                animationType="slide"
                transparent={true}
            >
                <View style={styles.modalContainer}>
                    <View style={styles.modalContent}>
                        <Text style={styles.modalTitle}>当前服务器地址</Text>
                        <TextInput
                            style={styles.modalInput}
                            placeholder="请输入服务器地址"
                            placeholderTextColor="#999"
                            value={settingsInput}
                            onChangeText={setSettingsInput}
                            autoCapitalize="none"
                            keyboardType="url"
                        />
                        <View style={styles.modalButtonContainer}>
                            <Button
                                style={styles.cancelButton}
                                onPress={handleSettingsCancel}
                            >
                                取消
                            </Button>
                            <Button
                                style={styles.modalButton}
                                onPress={handleSettingsConfirm}
                                type="primary"
                            >
                                确认
                            </Button>
                        </View>
                    </View>
                </View>
            </Modal>
        </KeyboardAvoidingView>
    );
};

export default LoginScreen; 